<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <style>
        #header {
            height: 200px;
            border: 1px solid rgb(196, 196, 196);
        }
        
        #header1 {
            border: 1px solid rgb(196, 196, 196);
            height: 50px;
        }
        
        #header3 input {
            margin: 20px;
            padding: 20px;
            height: 50px;
        }
        
        #header2 {
            display: block;
            margin-right: 60px;
            font-size: 16px;
            color: #fff;
            line-height: 46px;
            position: relative;
        }
        
        a {
            text-decoration: none;
            outline: none;
            color: #555;
        }
        
        .base-search-ipt {
            /* text-indent: 3.5em; */
            padding: 9px;
            width: 435px;
            margin: 10px;
            /* font: 17px/18px Microsoft YaHei, tahoma, \5b8b\4f53; */
            background: #fff url(../../imgs/index-search.jpg) no-repeat 3px center;
            border-radius: 0;
            border: 1px solid #E2E2E2;
            box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 0.15);
        }
        
        #queryform2 {
            border: 1px solid rgb(196, 196, 196);
            width: 60%;
            margin: 20px;
        }
        
        .tab-content {
            width: 835px;
        }
        
        .need1 {
            margin-left: 20px;
            width: 835px;
        }
        
        .thumbnail img {
            width: 150px;
            height: 150px;
            text-align: left;
        }
    </style>
</head>

<body>
    <div id="header">


    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12" id="header1">
                <div class="col-md-1" id="header2"><a href="#">全部需求</a></div>
                <div class="col-md-2" id="header2"><a href="serviceadd.html">免费发布需求</a></div>
            </div>
        </div>
    </div>




    <div class="container-fluid" id="queryform2">
        <div class="row">
            <form method="get">
                &nbsp; &nbsp; &nbsp; &nbsp;<a href="#tab-3" aria-expanded="false"><button class="btn btn-default">
                        搜索</button></a>
                <input type="text" class="VAILD base-search-ipt" id="floor_query" name="queryStr" value=""> <label for="floor_query" class="search-label-shuiyin" style="display: block;">

                </label>

            </form>
        </div>

        <div class="row">
            <div class="need1">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 全部需求</a>
                        </li>
                        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">老人</a>
                        </li>
                        <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">小孩</a>
                        </li>
                        <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">其他</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
                                详细需求1
                            </div>
                        </div>
                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">
                                详细需求2
                            </div>
                        </div>
                        <div id="tab-3" class="tab-pane">
                            <div class="panel-body">
                                详细需求3
                            </div>
                        </div>
                        <div id="tab-4" class="tab-pane">
                            <div class="panel-body">
                                详细需求4
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="need1">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">

                        <li class=""><a href="#tab-1" aria-expanded="false"> 需求发布</a>
                        </li>
                        <li class="">
                            <div class="checkbox">
                                <label class="checkbox" for="closeButton">
                                    <input id="closeButton" type="checkbox" value="checked" class="input-mini"
                                        checked="">关闭按钮
                                </label>
                            </div>
                        </li>
                        <li class="">
                            <div class="checkbox">
                                <label class="checkbox" for="closeButton">
                                    <input id="closeButton" type="checkbox" value="checked" class="input-mini"
                                        checked="">关闭按钮
                                </label>
                            </div>
                        </li>
                        <li class="">
                            <div class="checkbox">
                                <label class="checkbox" for="closeButton">
                                    <input id="closeButton" type="checkbox" value="checked" class="input-mini"
                                        checked="">关闭按钮
                                </label>
                            </div>
                        </li>
                        <li class="">
                            <div class="checkbox">
                                <label class="checkbox" for="closeButton">
                                    <input id="closeButton" type="checkbox" value="checked" class="input-mini"
                                        checked="">关闭按钮
                                </label>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="need1">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">

                        <li class=""><a href="#tab-1" aria-expanded="false"> 需求发布</a>
                        </li>
                        <li class=""><a href="#tab-2" aria-expanded="false">全部需求</a>
                        </li>
                        <li class=""><a href="#tab-3" aria-expanded="false">个人需求</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>





        <div class="row">
            <div class="need1 ">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class=""><a href="#tab-1" aria-expanded="false"> 需求状态</a>
                        </li>
                        <li class=""><a href="#tab-2" aria-expanded="false">进行中</a>
                        </li>
                        <li class=""><a href="#tab-3" aria-expanded="false">已完成</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <br><br><br>

        <div class="row">
            <div class="need1">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">

                        <li class=""><a href="#tab-1" aria-expanded="false">默认</a>
                        </li>
                        <li class=""><a href="#tab-2" aria-expanded="false">发布时间</a>
                        </li>
                        <li class=""><a href="#tab-3" aria-expanded="false">成交次数</a>
                        </li>
                        <li class=""><a href="#tab-3" aria-expanded="false">推荐人数</a>
                        </li>
                        <li class=""><a href="#tab-3" aria-expanded="false">价格</a>
                        </li>
                        <li class=""><a href="#tab-3" aria-expanded="false">更多</a>
                        </li>
                        <a href="#tab-3" aria-expanded="false"><input type="text" style="width:40px;"> ~ <input type="text" style="width:40px;"></a>
                        &nbsp;
                        <a href="#tab-3" aria-expanded="false"><button class="btn btn-default"> 确认</button></a>

                    </ul>
                </div>
            </div>
        </div>

        <br>
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="servicedetail.html"><img src="../../imgs/touxiang.jpg" alt=""></a>
                <span style="font-size: 20px;">￥5.00</span><span>/个</span>
                <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
                <div style="overflow: hidden">
                    <p style="float: left">name </p>
                    <p style="float:right">city</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="servicedetail.html"><img src="../../imgs/touxiang.jpg" alt=""></a>
                <span style="font-size: 20px;">￥5.00</span><span>/个</span>
                <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
                <div style="overflow: hidden">
                    <p style="float: left">name </p>
                    <p style="float:right">city</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="servicedetail.html"><img src="../../imgs/touxiang.jpg" alt=""></a>
                <span style="font-size: 20px;">￥5.00</span><span>/个</span>
                <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
                <div style="overflow: hidden">
                    <p style="float: left">name </p>
                    <p style="float:right">city</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="servicedetail.html"><img src="../../imgs/touxiang.jpg" alt=""></a>
                <span style="font-size: 20px;">￥5.00</span><span>/个</span>
                <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
                <div style="overflow: hidden">
                    <p style="float: left">name </p>
                    <p style="float:right">city</p>
                </div>
            </div>
        </div>



    </div>






    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
</body>

</html>